<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue入门指南——FORM表单绑定</title>
    <link rel="stylesheet" href="common.css" />
    <script type="importmap">
      {
        "imports": {
          "vue": "https://lib.baomitu.com/vue/latest/vue.esm-browser.js"
        }
      }
    </script>
  </head>
  <body>
    <div id="app">
      <p>
        <input
          type="text"
          placeholder="输入文本"
          :value="text"
          @input="event=> text= event.target.value"
        /><span>{{text}}</span>
      </p>

      <p><input type="text" placeholder="单行文本" v-model="msg1" />{{msg1}}</p>

      <p>
        <textarea
          name=""
          id=""
          cols="30"
          rows="10"
          placeholder="多行文本"
          v-model="msg2"
        ></textarea>
      </p>
      <pre>{{msg2}}</pre>

      <p>
        <input type="checkbox" name="" id="" v-model="checked" />
        <label for="cb1">{{checked}}</label>
      </p>

      <p>
        <span>复选框多选——选中项：{{checkedNames}}</span>
        <br />
        <input
          type="checkbox"
          name=""
          id="one"
          value="选项一"
          v-model="checkedNames"
        />
        <label for="one">选项一</label>
        <input
          type="checkbox"
          name=""
          id="two"
          value="选项二"
          v-model="checkedNames"
        />
        <label for="two">选项二</label>
        <input
          type="checkbox"
          name=""
          id="three"
          value="选项三"
          v-model="checkedNames"
        />
        <label for="three">选项三</label>
        <input
          type="checkbox"
          name=""
          id="four"
          value="选项四"
          v-model="checkedNames"
        />
        <label for="four">选项四</label>
      </p>

      <p>
        <span>单选选中：{{picked}}</span>
        <br>
        <input type="radio" name="" id="r-one" value="One" v-model="picked">
        <label for="r-one">单选1</label>
        <input type="radio" name="" id="r-two" value="Two" v-model="picked">
        <label for="r-two">单选2</label>
      </p>

      <p>
        <span>下拉列表——选中项：{{selected}}</span>
        <br>
        <select name="" id="" v-model="selected">
            <option disabled value="">请选择</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
      </p>

      <p>
        <!-- 按住ctrl键多选 -->
        <span>下拉列表(多选)——选中项：{{mSelected}}</span>
        <br>
        <select name="" id="" v-model="mSelected" multiple>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
      </p>
    </div>

    <script type="module">
      import { createApp } from "vue";

      createApp({
        data() {
          return {
            text: "",
            msg1: "",
            msg2: "",
            checked: true,
            // checked: null, 设置未选中状态
            checkedNames: [],
            picked: "",
            // picked: "Two", 设置选中Two
            selected: "",
            // selected: "1", 设置选中1
            mSelected: "",
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
